<template>
  <div id="box">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="unid" prop="unid">
        <el-input v-model="ruleForm.unid"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pasWord">
        <el-input v-model="ruleForm.pasWord"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="ruleForm.nickName"></el-input>
      </el-form-item>
      <el-form-item label="权限id" prop="roleid">
        <el-input v-model="ruleForm.roleid"></el-input>
      </el-form-item>
      <el-form-item label="vip等级" prop="vipLevel">
        <el-input v-model="ruleForm.vipLevel"></el-input>
      </el-form-item>
      <el-form-item label="头像地址" prop="headimgurl">
        <el-input v-model="ruleForm.headimgurl"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-input v-model="ruleForm.sex"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="ruleForm.city"></el-input>
      </el-form-item>
      <el-form-item label="省份" prop="province">
        <el-input v-model="ruleForm.province"></el-input>
      </el-form-item>
      <el-form-item label="国别" prop="country">
        <el-input v-model="ruleForm.country"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="submitForm('ruleForm')">提交修改</el-button>
        <el-button type="success" @click="close">取消修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as api from "../../api";
import {mapMutations,mapState} from "vuex"
export default {
  data() {
    return {
      ruleForm: {
        unid: "",
        userName: "",
        pasWord: "",
        phone: "",
        nickName: "",
        roleid: "",
        vipLevel: "",
        headimgurl: "",
        sex: "",
        city: "",
        province: "",
        country: "",
      },
      rules: {
        unid: [
          { required: true, message: "请传入unid", trigger: "blur" },
          //   { min: 3, max: 12, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ],
        userName: [
          { required: false, message: "账户名称", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ],
        pasWord: [
          { required: false, message: "账户密码", trigger: "blur" },
          { min: 3, max: 11, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ],
        phone: [
          { required: false, message: "🇨🇳手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度为11位数字", trigger: "blur" },
        ],
        nickName: [
          { required: false, message: "昵称", trigger: "blur" },
          { min: 1, max: 11, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ],
        roleid: [
          { required: false, message: "权限id", trigger: "blur" },
          //   { min: 1, max: 11, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ],
        vipLevel: [
          { required: false, message: "VIP等级", trigger: "blur" },
          //   { min: 1, max: 11, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ],
        headimgurl: [
          { required: false, message: "头像URL", trigger: "blur" },
          //   { min: 1, max: 11, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ],
        sex: [
          { required: false, message: "性别", trigger: "blur" },
          //   { min: 1, max: 11, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ],
        city: [
          { required: false, message: "城市", trigger: "blur" },
          //   { min: 1, max: 11, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ],
        province: [
          { required: false, message: "省份", trigger: "blur" },
          //   { min: 1, max: 11, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ],
        country: [
          { required: false, message: "国别", trigger: "blur" },
          //   { min: 1, max: 11, message: "长度在 1 到 11 个字符", trigger: "blur" },
        ],
      },
    };
  },
  mounted(){
    //   console.log(this.updatauserdata);
      this.ruleForm.unid = this.updatauserdata.unid
      this.ruleForm.userName = this.updatauserdata.username
    //   this.ruleForm.pasWord = this.updatauserdata.pasword
      this.ruleForm.phone = this.updatauserdata.phone
      this.ruleForm.nickName = this.updatauserdata.nickname
    //   this.ruleForm.roleid = this.updatauserdata.roleid
    //   this.ruleForm.vipLevel = this.updatauserdata.vipLevel
      this.ruleForm.headimgurl = this.updatauserdata.headimgurl
      this.ruleForm.sex = this.updatauserdata.sex
      this.ruleForm.city = this.updatauserdata.city
      this.ruleForm.province = this.updatauserdata.province
      this.ruleForm.country = this.updatauserdata.country
  },
  computed:{
      ...mapState(["updatauserdata"])
  },
  methods: {
    ...mapMutations(["SET_UPDATAUSERS"]),//映射开关方法
    close(){
        this.SET_UPDATAUSERS("")
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          // console.log(this.ruleForm.unid);
          // console.log(this.ruleForm.pasWord);
          // console.log(this.ruleForm.headimgurl);
          //修改操作
          api.updateUserApi(
            this.ruleForm.unid,
            this.ruleForm.userName,
            this.ruleForm.pasWord,
            this.ruleForm.phone,
            this.ruleForm.nickName,
            this.ruleForm.roleid,
            this.ruleForm.vipLevel,
            this.ruleForm.headimgurl,
            this.ruleForm.sex,
            this.ruleForm.city,
            this.ruleForm.province,
            this.ruleForm.country
          );
          //关闭组件显示
            this.SET_UPDATAUSERS("")
        } else {
          this.$message.error("修改失败,请务必传入unid");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
#box {
//   position: absolute;
  position: fixed;
  top:20%;
  left:30%;
  background-color: pink;
  z-index: 1;
  /deep/.el-form {
    // margin-top:10px;
    margin: 10px auto;
    width: 600px;
    .el-form-item {
        margin-bottom:7px !important;
        // text-align:center;
        padding-left:110px;
      .el-form-item__content {
        width: 220px;
        .el-input {
          width: 200px;
          .el-input__inner {
            width: 200px;
          }
        }
      }
    }
  }
}
</style>
